import { useState, useEffect } from 'react'
import { resourcePath } from '../../../../../../../utils/resource';
import { Button, Table } from 'antd';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import { navByWkt } from '../../../../../../../utils/helper/mapHelper';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
import ptPng from '../images/崩塌_画板 1.png';
import cjPng from '../images/718地面沉降_画板 1.png';
import lslPng from '../images/泥石流_画板 1.png';
import klPng from '../images/开裂_画板 1.png';
import hpPng from '../images/滑坡_画板 1.png';
import txPng from '../images/718地面塌陷_画板 1.png'
import './index.less';
import FetchHelper from "../../../../../../../utils/helper/fetch-helper";
export default function Zhjc(props) {
    const [datas, setDatas] = useState();
    const [params, setParams] = useState();
    const [total, setTotal] = useState();
    const map = useBusinessMap();
    // useEffect(()=>{
    //     const fetchData = async ()=>{
    //         try{
    //             const response = await FetchHelper.getJson(`/ybyj/dizhiData/groupByZhlx`);
    //             setDatas(response.data);
    //         }catch(error){

    //         }
    //     };
    //     fetchData();
    // },[]);
    useEffect(() => {
        FetchHelper.getJson(`/admin-api/ybyj/dizhiData/groupByZhlx`).then(response => {
            setDatas(response.data);
        })
    }, [])
    console.log('datas', datas)



    return <>
        <div style={{
            background: `url(${resourcePath.blockTitleBg})`,
            height: 36,
            backgroundSize: '100% 100%',
            fontSize: 18,
            lineHeight: '36px',
            paddingLeft: 12,
            fontWeight: "bold"
        }}>
            地质灾害监测
        </div>
        <div className='list'>
            <div>
                <img src={txPng} alt='' />
                <span>塌陷({datas?.find(data => { return data.zhlx === '塌陷' })?.number})</span>
            </div>
            <div>
                <img src={cjPng} alt='' />
                <span>沉降({6})
                    {/* ({datas?.find(data => { return data.zhlx === '沉降' }).number}) */}
                </span>
            </div>
            <div>
                <img src={klPng} alt='' />
                <span>开裂({datas?.find(data => { return data.zhlx === '开裂' })?.number})</span>
            </div>
            <div>
                <img src={hpPng} alt='' />
                <span>滑坡({datas?.find(data => { return data.zhlx === '滑坡' })?.number})</span>
            </div>
            <div>
                <img src={lslPng} alt='' />
                <span>泥石流({datas?.find(data => { return data.zhlx === '泥石流' })?.number})</span>
            </div>
            <div>
                <img src={ptPng} alt='' />
                <span>崩塌({datas?.find(data => { return data.zhlx === '崩塌' })?.number})</span>
            </div>
        </div>
    </>
}